
<template>
  <div>
    <van-dialog v-model:show="show" title="标题">
      <div style="height: 200px; height: 200px">
        <video ref="video"   v-if="show"   style="width:100%; height: 100%"  autoplay controls >
            <source :src="source" >
        </video>
        <!-- <vue3videoPlay
          v-bind="options"
          poster="https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/ironMan.jpg"
        /> -->
      </div>
    </van-dialog>
    <div class="product-list-wrap">
      <div class="product-list-content">
        <header class="category-header wrap">
          <i class="nbicon nbfanhui" @click="goBack"></i>
          <div class="header-search">
            <i class="nbicon nbSearch"></i>
            <input type="text" class="search-title" v-model="keyword" />
          </div>
          <span class="search-btn" @click="getSearch">搜索</span>
        </header>
        <!-- <van-tabs type="card" color="#1baeae" @click="changeTab" >
        <van-tab title="推荐" name=""></van-tab>
        <van-tab title="新品" name="new"></van-tab>
        <van-tab title="价格" name="price"></van-tab>
      </van-tabs> -->
      </div>
      <div class="content">
        <van-pull-refresh
          v-model="refreshing"
          @refresh="onRefresh"
          class="product-list-refresh"
        >
          <van-list
            v-model:loading="loading"
            :finished="finished"
            :finished-text="
              productList.length
                ? '没有更多了'
                : '这么喜欢看视频,不会去推特看看?'
            "
            @load="onLoad"
            @offset="10"
          >
            <!-- <p v-for="item in list" :key="item">{{ item }}</p> -->
            <template v-if="productList.length">
              <div
                class="product-item"
                v-for="(item, index) in productList"
                :key="index"
                @click="productDetail(item)"
              >
                <!-- {{item}} -->
                <!-- <img :src="$filters.prefix(item.goodsCoverImg)" />
              <div class="product-info">
                <p class="name">{{item.goodsName}}</p>
                <p class="subtitle">{{item.goodsIntro}}</p>
                <span class="price">￥ {{item.sellingPrice}}</span>
              </div> -->
                <van-card
                  :desc="item.vlogerName"
                  :title="item.title"
                  :thumb="item.cover"
                >
                  <template #price>
                    喜欢看的人:{{ item.likeCount }} 评论的人数:{{
                      item.commentCount
                    }}
                  </template>
                </van-card>
              </div>
            </template>
            <img
              class="empty"
              v-else
              src="https://s.yezgea02.com/1604041313083/kesrtd.png"
              alt="搜索"
            />
          </van-list>
        </van-pull-refresh>
      </div>
      <nav-bar></nav-bar>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getList } from "@/service/video";
// import vueAliplayerV3 from "vue-aliplayer-v3";
import navBar from "@/components/NavBar";
import "vue3-video-play/dist/style.css";
import { videoPlay } from "vue-video-play";
// var player = new Aliplayer({
//   id: "J_prismPlayer",
//   autoplay: true,
//   width: "1920px",
//   height: "1280px",
//   vid: "d165d96ea9ef4fe0ad00f24c3c0cf273",
//   playauth: "",
//   cover: "",
// });
// console.log(vueAliplayerV3);
export default {
  components: {
    navBar,
    // videoPlay,
    // "vueAliplayerV3":vueAliplayerV3,
  },
  setup() {
    const show = ref(false);
    const video = ref(null);
    const route = useRoute();
    const router = useRouter();
    const options = reactive({
      width: "800px", //播放器高度
      height: "450px", //播放器高度
      color: "#409eff", //主题色
      title: "", //视频名称
      src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
      muted: false, //静音
      webFullScreen: false,
      speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
      autoPlay: false, //自动播放
      loop: false, //循环播放
      mirror: false, //镜像画面
      ligthOff: false, //关灯模式
      volume: 0.3, //默认音量大小
      control: true, //是否显示控制
      controlBtns: [
        "audioTrack",
        "quality",
        "speedRate",
        "volume",
        "setting",
        "pip",
        "pageFullScreen",
        "fullScreen",
      ], //显示所有按钮,
    });
    const state = reactive({
      keyword: route.query.keyword || "",
      searchBtn: false,
      seclectActive: false,
      refreshing: false,
      list: [],
      loading: false,
      finished: false,
      productList: [],
      totalPage: 0,
      page: 1,
      orderBy: "",
    });
    const source = ref(`https://outin-9c855f54646a11ec96fe00163e00b174.oss-cn-shanghai.aliyuncs.com/sv/125a2a3f-17deac0e573/125a2a3f-17deac0e573.mp4?Expires=1640538906&OSSAccessKeyId=LTAIxSaOfEzCnBOj&Signature=WOFAORj%2FD3JVZ9NxQymgE5Xxkq8%3D`);

    onMounted(() => {
      // init();
    });

    const init = async () => {
      // const { categoryId } = route.query;
      // if (!categoryId && !state.keyword) {
      //   // Toast.fail('请输入关键词')
      //   state.finished = true;
      //   state.loading = false;
      //   return;
      // }
      // const {
      //   data,
      //   data: { list },
      // } = await search({
      //   pageNumber: state.page,
      //   goodsCategoryId: categoryId,
      //   keyword: state.keyword,
      //   orderBy: state.orderBy,
      // });
      let list;
      await getList({
        search: state.keyword,
        page: state.page,
        pageSize: 10,
      }).then((rep) => {
        rep = rep.data;
        list = rep.rows;
        state.totalPage = rep.total;
        state.loading = false;
        if (state.page >= rep.total) state.finished = true;
        console.log(state.page);
      });
      state.productList = state.productList.concat(list);
      console.log(state.productList);
    };

    const goBack = () => {
      router.push({name:"user"})
    };

    const productDetail = (item) => {
      show.value = true;
      source.value=item.url;
      console.log(source.value)
      // console.log(video);
      // video.play();
      // router.push({ path: `/product/${item.goodsId}` });
    };

    const getSearch = () => {
      onRefresh();
    };

    const onLoad = () => {
      if (!state.refreshing && state.page < state.totalPage) {
        state.page = state.page + 1;
      }
      if (state.refreshing) {
        state.productList = [];
        state.refreshing = false;
      } 
      init();
    };

    const onRefresh = () => {
      state.refreshing = true;
      state.finished = false;
      state.loading = true;
      state.page = 1;
      onLoad();
    };

    const changeTab = (name) => {
      console.log("name", name);
      state.orderBy = name;
      onRefresh();
    };

    return {
      video,
      show,
      ...toRefs(state),
      goBack,
      productDetail,
      getSearch,
      changeTab,
      onLoad,
      onRefresh,
      source,
      options,
    };
  },
};
</script>

<style lang="less" scoped>
@import "../common/style/mixin";
.product-list-content {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  .category-header {
    .fj();
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    .boxSizing();
    font-size: 15px;
    color: #656771;
    z-index: 10000;
    &.active {
      background: @primary;
    }
    .icon-left {
      font-size: 25px;
      font-weight: bold;
    }
    .header-search {
      display: flex;
      width: 76%;
      height: 20px;
      line-height: 20px;
      margin: 10px 0;
      padding: 5px 0;
      color: #232326;
      background: #f7f7f7;
      .borderRadius(20px);
      .nbSearch {
        padding: 0 5px 0 20px;
        font-size: 17px;
      }
      .search-title {
        width: 100%;
        font-size: 12px;
        color: #666;
        background: #f7f7f7;
      }
    }
    .icon-More {
      font-size: 20px;
    }
    .search-btn {
      height: 28px;
      margin: 8px 0;
      line-height: 28px;
      padding: 0 5px;
      color: #fff;
      background: @primary;
      .borderRadius(5px);
      margin-top: 10px;
    }
  }
}
.content {
  height: calc(~"(100vh - 120px)");
  overflow: hidden;
  overflow-y: scroll;
  margin-top: 78px;
}
.product-list-refresh {
  .product-item {
    // .fj();
    // width: 100%;
    height: 120px;
    padding: 10px 0;
    padding-left: 10px;
    border-bottom: 1px solid #dcdcdc;
    img {
      width: 140px;
      height: 120px;
      padding: 0 10px;
      .boxSizing();
    }
    .product-info {
      width: 100%;
      height: 120px;
      padding: 5px;
      text-align: left;
      .boxSizing();
      p {
        margin: 0;
      }
      .name {
        width: 100%;
        max-height: 40px;
        line-height: 20px;
        font-size: 15px;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .subtitle {
        width: 100%;
        max-height: 20px;
        padding: 10px 0;
        line-height: 25px;
        font-size: 13px;
        color: #999;
        overflow: hidden;
      }
      .price {
        color: @primary;
        font-size: 16px;
      }
    }
  }
  .empty {
    display: block;
    width: 150px;
    margin: 50px auto 20px;
  }
}
</style>
